<template>
    <div class="dialog-notice">
        <el-dialog title="信息" :visible.sync="dialogVisible" width="40%" @close="handleClose">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item prop="reviewStatus" label="审核状态" :label-width="formLabelWidth">
                    <el-select size="small" v-model="value" width="100%" @change="handleChange" placeholder="请选择状态">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="reviewExplain" label="审核说明" :label-width="formLabelWidth">
                    <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.reviewExplain">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('form')">取 消</el-button>
                <el-button type="info" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    name: 'ApplyDialog',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        return {
            dialogVisible: false,
            form: {
                reviewStatus: '',
                reviewExplain: ''
            },
            formLabelWidth: '80px',
            rules: {
                reviewStatus: [{ required: true, message: '审核状态不能为空！', trigger: 'blur' }],
                reviewExplain: [{ required: true, message: '审核说明不能为空！', trigger: 'blur' }]
            },
            options: [{
                value: '0',
                label: '待审核'
            }, {
                value: '1',
                label: '审核通过'
            }, {
                value: '2',
                label: '审核不通过'
            }],
            value: '0'
        }
    },
    computed: {
        ...mapState('userStore', ['userInfo']),

    },
    watch: {

    },
    mounted() {
        this.$bus.$on('add', this.dialogShow)
        this.$bus.$on('getForm', this.getForm)
    },
    methods: {
        handleClose() {
            this.form = {}
            this.value = '0'
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {

                    let obj = {
                        id: this.form.id,
                        reviewStatus: this.value,
                        reviewExplain: this.form.reviewExplain,
                        // createdBy: this.userInfo.username
                    }

                    this.$emit('editPoorApply', obj)
                    this.$message({
                        type: 'success',
                        message: '操作成功！'
                    })
                    this.dialogVisible = false
                } else {
                    return false;
                }
            });

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false
        },
        dialogShow(value) {
            this.dialogVisible = true
        },
        getForm(editRow) {
            this.form = editRow
        },
        handleChange(value) {
            this.value = value
        }
    }
};
</script>
<style lang='less' scoped>
.dialog-notice {
    background-color: aqua;

    .el-form {
        padding: 10px 40px;
    }

    .el-input__inner:focus {
        border-color: #11A983 !important;
        /* 使用!important确保覆盖 */
    }
}
</style>